{{define "index.html"}}
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="/static/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="/static/bootstrap/dist/css/bootstrap-datetimepicker.min.css">
		<script src="/static/js/jquery.min.js"></script>
		<script src="/static/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="/static/js/bootstrap-datetimepicker.js"></script>
		<script src="/static/js/bootstrap-datetimepicker.zh-CN.js"></script>
		<title>语音播报闹铃</title>
	</head>
	<body>
		<div class="container">
			<div class="row clearfix">
				<div class="col-md-12 column">
					<h2>
						提交语音定时任务
					</h2>
					<div class="row clearfix">
						<div class="col-md-8 column">
							<table class="table table-hover">
								<thead>
									<tr>
										<th>
											编号
										</th>
										<th>
											闹铃时间
										</th>
										<th>
											内容
										</th>
										<th>
											类型
										</th>
										<th>
											次数
										</th>
										<th>
											间隔
										</th>
									</tr>
								</thead>
								<tbody>
									{{ . | display }}
								</tbody>
							</table>
						</div>
						<div class="col-md-4 column">
							<form class="form-horizontal" role="form" method="post" id="input" name="input"
								action="/input">
								<div class="form-group">
									<label for="alarm_time" class="col-sm-2 control-label">时间</label>
									<div class="col-sm-10 input-group date form_datetime" id="datetimepicker1">
										<input type="text" class="form-control" id="alarm_time" name="alarm_time" />
										<span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>
								<div class="form-group">
									<label for="alarm_text" class="col-sm-2 control-label">内容</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="alarm_text" placeholder="该吃饭了"
											name="alarm_text" />
									</div>
								</div>
								<div class="form-group">
									<label for="alarm_text" class="col-sm-2 control-label ">类型</label>
									<div class="col-sm-10  ">
										<div class="col-sm-4 ">
											<div class="radio ">
												<label>
													<input type="radio" name="alarm_type" id="optionsRadios1"
														value="timing">
													定时
												</label>
											</div>
										</div>
										<div class="col-sm-4 ">
											<label for="alarm_count" class=" control-label">提醒次数</label>
										</div>
										<div class="col-sm-4 ">
											<input type="text" class="form-control" id="alarm_count" placeholder="1"
												name="alarm_count" />
										</div>
									</div>
									<label class="col-sm-2 control-label "></label>
									<div class="col-sm-10  ">
										<div class="col-sm-4 ">
											<div class="radio ">
												<label>
													<input type="radio" name="alarm_type" id="optionsRadios2"
														value="loop">
													循环
												</label>
											</div>
										</div>
										<div class="col-sm-4 ">
											<label for="alarm_space" class=" control-label">时间间隔</label>
										</div>
										<div class="col-sm-4 ">
											<input type="text" class="form-control" id="alarm_space" placeholder="1"
												name="alarm_space" />
										</div>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
										<button type="submit" class="btn btn-default">注 册</button>
									</div> 
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-offset-2 col-sm-10">
				<form class="form-horizontal" role="form" method="get" name="relbt" action="/index"> 
					<button type="submit" class="close" name="reload" id="dosubmit" onclick="reload_index();">&times;</button> 
				</form>
			</div>
		</div>
		<script type="text/javascript">
			$(function() {
				$('#datetimepicker1').datetimepicker({
					language: "zh-CN"
				});
			});
		</script>
		<script>
			function reload_index(){
				document.getElementById("dosubmit").click();
			}
			// // 定时刷新页面
			// var reloadPage =setInterval(function(){
			// 	reload_index()
			// },30000);
			var utterThis = new SpeechSynthesisUtterance();
			utterThis.volume = 1; // 声音的音量 范围是0到1
			utterThis.rate = 0.6; //语速，数值，默认值是1，范围是0.1到10
			utterThis.pitch = 1; // 音高，数值，范围从0（最小）到2（最大）。默认值为1
			// 声明一个定时器 每5秒执行一次
			var myVar = setInterval(function() {
				myTimer()
			}, 10000);

			function myTimer() {
				$.ajax({
					url: "/alarm",
					type: "POST",
					async: true,
					data: {},
					cache: false,
					contentType: "application/x-www-form-urlencoded",
					success: function(data) {
						// 调试用
						// console.log(data);  
						for (const key in data) {
							// 刷新页面
							reload_index() 
							if (data[key].Text == "") {

								// alert('message')
							} else { 
								// 刷新页面
							    // reload_index() 
								// console.log("this") 
								utterThis.text = data[key].Text;
								speechSynthesis.speak(utterThis);

							} 
						} 
					},
					fail: function(data) {
						// alert("更新失败!");
					}
		
				}); 
			}
		</script>
	</body>
</html> 
{{end}}